<template>
  <div class="page-container">
    <!-- 顶部L2.png图片 -->
    <div class="top-image-container">
      <img src="/static/tp/L2.png" alt="顶部背景图" class="top-image" />
    </div>

    <!-- tp9.png图片区域 -->
    <div class="content-image-container">
      <img src="/static/tp/tp9.png" alt="内容图片" class="content-image" />
      <!-- 四行文本内容 -->
      <div class="tp9-text">
        <p>我们终将跃入人海</p>
        <p>各有风雨灿烂</p>
        <p>愿此去繁花似锦</p>
        <p>再相逢依旧如故</p>
      </div>
    </div>

    <!-- 新增跳转按钮 -->
    <button class="navigate-btn" @click="goToDi8">
      前往领取页面
    </button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  name: "di7",
  methods: {
    // 跳转至di8.vue页面
    goToDi8() {
      uni.navigateTo({
        url: '/pages/index/shou_ye/di8'
      })
    }
  }
})
</script>

<style scoped>
/* 页面容器样式 */
.page-container {
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 顶部L2.png图片样式 */
.top-image-container {
  width: 100%;
}

.top-image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* tp9.png图片区域样式 */
.content-image-container {
  width: 90%;
  margin: 20px auto;
  position: relative;
}

.content-image {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* tp9图片上的文本样式 */
.tp9-text {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: 176px;
  height: 31px;
  font-size: 22px;
  color: #4F3F2C;
  letter-spacing: 0;
  line-height: 30.8px;
}

/* 新增跳转按钮样式 */
.navigate-btn {
  width: 90%;
  margin: 20px auto;
  padding: 12px 0;
  background-color: #0066cc;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  display: block;
}

.navigate-btn:hover {
  background-color: #0055aa;
}

/* 响应式适配 */
@media (max-width: 768px) {
  .content-image-container {
    width: 95%;
  }
  .navigate-btn {
    width: 95%;
  }
}
</style>